<template>
  <div>
    <!-- 组件引入 -->
    <cart-header></cart-header>
    <div class="dxcartbg">
      <!-- 面包屑 -->
      <div class="w1200">
        <p class="bread-crumb">
          <a href="/" title="爱发表网">首页</a> &gt;
          <a href="" title="会员中心">会员中心</a> &gt;
          <span>购物车</span>
        </p>
      </div>

      <div class="w1200">
        <div class="my_cart_box">
          <div class="bg-box"></div>
          <ul class="order_step">
            <li class="current"><span class="first">1、查看购物车</span></li>
            <li><span>2、填写核对订单信息</span></li>
            <li class="last"><span>3、成功提交订单</span></li>
          </ul>
        </div>
        <div class="h20"></div>

        <div class="goods_list table-list" style="background-color: #fff">
          <table>
            <thead>
              <tr>
                <th width="100" class="ta_c">商品</th>
                <th align="left">名称</th>
                <th width="100">市场价</th>
                <th width="120">数量</th>
                <th width="150">折扣</th>
                <th width="100">小计</th>
                <th width="120">操作</th>
              </tr>
            </thead>
            <tfoot>
              <tr>
                <td colspan="7">
                  <div class="cart_info">
                    商品总价(不含运费)：<span class="cart_total"
                      ><i>&yen;</i
                      ><span class="cart_price_total">720.00</span></span
                    >
                  </div>
                  <div class="cart_but">
                    <a @click="jump('/')" class="input-but input-but-gary"
                      >继续购物</a
                    >
                    <a @click="jump('/cart2')" class="input-but order_submit"
                      >结算</a
                    >
                  </div>
                </td>
              </tr>
            </tfoot>

            <tbody style="border-left: none; border-right: none">
              <tr>
                <td>
                  <p class="cart_img">
                    <img src="/img/19c25_18163.jpg" width="75" height="100" />
                  </p>
                </td>
                <td>
                  <h4 class="cart_title">
                    <a href="" target="_blank">新闻研究导刊</a>
                  </h4>
                  <ul class="cart_spec"></ul>
                </td>
                <td align="center">800.00</td>
                <td align="center">
                  <dl class="goods_nums after-clear" style="margin-top: -5px">
                    <dd>
                      <a href="" class="buy_nums_sub">-</a
                      ><input
                        type="text"
                        name="goods_num"
                        value="1"
                        readonly="true"
                        data-max="192"
                        data-gid="8256"
                        data-pid="10186"
                      /><a href="" class="buy_nums_add">+</a>
                    </dd>
                  </dl>
                </td>
                <td id="note_10186" align="center">
                  <!---->
                  9.0折
                </td>
                <td align="center" class="cart_price" id="price_10186">
                  720.00
                </td>
                <td align="center">
                  <a class="cart_act" href="" data-url="">删除</a>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>

      <div class="h20"></div>
    </div>
    <cart-footer></cart-footer>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    // 页面跳转
    jump(path) {
      this.$router.push({
        path: "/cart2",
      });
    },
  },
  beforeRouteEnter(to, from, next) {
    // 添加背景色 margin:0;padding:0是为了解决vue四周有白边的问题
    document.querySelector("body").setAttribute("style", "margin:0;padding:0");
    next();
  },
};
</script>

<style lang="scss" scoped>
.dxcartbg {
  height: 610px;
  margin: 5px auto;
  background-color: #219bd9;
  box-sizing: border-box;
}

.w1200 {
  width: 1284px;
  margin: 0 auto;
}

.bread-crumb {
  padding: 22px 0 22px 0;
  font-size: 13px;
  color: #fff;
}

p {
  display: block;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}

.bread-crumb a {
  color: #fff;
}

a:-webkit-any-link {
  /* color: -webkit-link; */
  cursor: pointer;
  /* text-decoration: underline; */
}

.bread-crumb {
  padding: 22px 0 22px 0;
  font-size: 13px;
  color: #fff;
}

/* 购物车白块内容 */
.my_cart_box {
  height: 138px;
  background-color: #fff;
}

/* 左-图片部分 */
.my_cart_box > .bg-box {
  float: left;
  width: 30%;
  height: 100px;
  margin-top: 19px;
  background: #fff url(/public/img/mycart.gif) no-repeat 60px 26px;
}

/* 右边三个span */
.order_step {
  margin: 53px 46px 0px 0px;
  width: 652px;
  height: 32px;
  line-height: 32px;
  float: right;
}

/* 橙色条 */
.order_step li.current {
  background-position: right -82px;
  color: #fff;
  background-color: #ed6807;
}

.order_step li {
  background: url(/public/img/mycart.gif) no-repeat right -82px #ffe8d7;
  padding: 0px 29px 0px 0px;
  width: 188px;
  height: 32px;
  color: #ccc;
  overflow: hidden;
  font-size: 14px;
  font-weight: bold;
  float: left;
  text-align: center;
}

.order_step li.current .first {
  background-position: 0px -178px;
}

.order_step li .first {
  background-image: url("/public/img/mycart.gif") no-repeat 0px -146px;
}

.order_step li span {
  display: block;
}

.order_step li.last {
  /* background-position: right -210px; */
}

/* 中间清除样式divh20 */
.h20 {
  height: 20px;
  display: block;
  overflow: hidden;
}

/* 商品列表 */
.goods_list {
  padding: 40px 48px 0;
}

/* 商品表格 */
.table-list table {
  width: 100%;
  margin: 10px 0;
  border-collapse: collapse;
  border: none;
}

table {
  display: table;
  /* border-collapse: separate; */
  /* box-sizing: border-box; */
  text-indent: initial;
  border-spacing: 2px;
  /* border-color: grey; */
}

thead {
  display: table-header-group;
  vertical-align: middle;
  border-color: inherit;
}

.table-list table thead tr {
  background-color: #f5f5f5;
}

.table-list table thead tr {
  height: 30px;
  text-align: center;
  background-color: #f1f1f1;
}

tr {
  display: table-row;
  vertical-align: inherit;
  border-color: inherit;
}

.table-list table thead th {
  border: 1px solid #f5f5f5;
  height: 27px;
}

.table-list table thead th {
  /* border: 1px solid #ececec; */
  color: #333;
}

th {
  display: table-cell;
  vertical-align: inherit;
  font-weight: bold;
  text-align: -internal-center;
}

.table-list table tfoot {
  border-bottom: none;
}

tfoot {
  display: table-footer-group;
  vertical-align: middle;
  border-color: inherit;
}

.table-list table tfoot tr,
.table-list table tfoot tr {
  background-color: transparent;
}

.table-list table tfoot tr {
  line-height: 45px;
  /* background-color: #f1f1f1; */
}

.table-list table tfoot td {
  padding: 2px 20px;
  text-align: right;
}

.table-list table tbody td {
  padding: 2px 5px;
  line-height: 25px;
  width: 120px;
  height: 115.07px;
}

.goods_list .cart_info {
  margin: 15px px 0;
  font-size: 14px;
}

.goods_list .cart_total {
  font-family: "Lucida Grande", Helvetica, Arial, Verdana, sans-serif, serif;
  font-size: 24px;
  font-weight: bold;
  color: red;
}

.goods_list .cart_total i {
  font-size: 16px;
  font-style: normal;
  margin: 0 10px;
}

.goods_list .cart_price {
  font-size: 14px;
  color: red;
}

.goods_nums {
  padding-top: 10px;
}

dl {
  display: block;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}

.goods_nums input {
  width: 50px;
  height: 22px;
  line-height: 22px;
  padding: 0;
  font-size: 12px;
  text-align: center;
  border-left: none;
  border-right: none;
  border-top: 1px solid #a2a2a2;
  border-bottom: 1px solid #a2a2a2;
  overflow: hidden;
  outline: medium;
  float: left;
}

.goods_nums a {
  width: 22px;
  height: 22px;
  line-height: 22px;
  display: inline-block;
  border: 1px solid #a2a2a2;
  text-decoration: none;
  text-align: center;
  float: left;
}

.goods_list .cart_title {
  /* height: 30px; */
  line-height: 30px;
  font-size: 14px;
}

.goods_nums dd {
  font: 12px Arial, Helvetica, sans-serif, "宋体";
}

html,
button,
input,
select,
textarea {
  font-family: sans-serif;
}

/* 按钮架构 */
.goods_list .cart_but {
  margin: 25px 0;
}

.input-but-gary {
  background-color: #999;
  color: #333;
}

.input-but {
  outline: medium;
  padding: 12px 22px;
  margin-left: 5px;
  margin-right: 5px;
  border-radius: 5px;
  background-color: #c41921;
  color: #fff;
  font-family: arial;
  font-size: 14px;
  vertical-align: middle;
  text-decoration: none;
}

a:-webkit-any-link {
  /* color: -webkit-link; */
  cursor: pointer;
  /* text-decoration: underline; */
}
</style>